<script setup lang='ts'>
import { useRouter } from "vue-router";
import pageStyle1 from "../../components/pageStyle1.vue";
import { ref, reactive, toRaw } from "vue";
import {
  Edit,
  Delete,
  Search,
  CircleCheckFilled,
  Check,
} from "@element-plus/icons-vue";
import { roleHook, queryRole } from "../../hooks/roleHooks";
import noticeDialog from "../../components/noticeDialog.vue";
import publicStore from "../../store/publicFunction";

const router = useRouter();

const pubStore = publicStore();

const _roleHook = roleHook();
_roleHook.getRoleList(getData);

function getData(data: any) {
  tableData.value = data;
  console.log("table数据", tableData);
}

// 添加修改
// 添加模态框的输入表单
const addForm = reactive<queryRole>({
  name: "",
});

// 清除添加表单值
const clearAdd = () => {
  addForm.name = "";
};

let tableData = ref<Array<any>>([
  {
    id: 1,
    name: "qwewq",
    num: 2,
    createTime: "2023-03-12 00:00:00",
    status: 0,
  },
  { id: 2, name: "1231", num: 3, createTime: "2023-03-14 00:00:00", status: 0 },
  {
    id: 3,
    name: "e12e1",
    num: 5,
    createTime: "2023-03-16 00:00:00",
    status: 1,
  },
]);

const limit = ref<number>(5);
const total = ref<number>(0);
const currentPage = ref<number>(1);

const pageChange = (val: any): void => {
  console.log("值", val);
  currentPage.value = val;
  _roleHook.getRoleList(getData);
};

const noDialog = ref(null);
const openUpdate = (e: any, type: number) => {
  let id;
  if (type == 1) {
    id = e.currentTarget.dataset.id;
    updateId.value = id;
    _roleHook.getById(id, function (data: object) {
      Object.assign(addForm, data);
      console.log("addform", addForm);
    });
  } else {
    addForm.name = "";
  }

  noDialog.value.open();
};

// 修改id
const updateId = ref<number>(0);

// 控制添加模态框的表单提交类型
const dialogSubmitType = ref<number>(0);

const insertData = () => {
  _roleHook.addRole(addForm.name, getData);
  clearAdd();
  // ElMessage("add");
};

const updateData = () => {
  let obj = toRaw(addForm) as queryRole;
  obj.id = updateId.value;
  _roleHook.updateRole(obj, getData);
};

// 删除询问框点击确定时调用函数
const toDelete = (id: any) => {
  currentPage.value = 1;
  _roleHook.deleteRole(id, getData);
};
</script>
<!-- 模型 -->
<template>
  <div class="">
    <page-style-1 title="角色列表">
      <template #headerRight>
        <el-button
          type="primary"
          plain
          @click="
            dialogSubmitType = 0;
            openUpdate($event, 0);
          "
          >添加角色</el-button
        >
      </template>
      <template #main>
        <div class="content">
          <el-table :data="tableData" center border style="width: 100%">
            <el-table-column prop="name" label="角色姓名" />
            <el-table-column prop="num" label="成员数量">
              <template #default="s">
                {{ 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
              <template #default="s">
                {{ "2023-05-12 13:42:34" }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="是否启用">
              <template #default="s">
                <span class="status success" :data-id="s.row.id">上线</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="s">
                <el-button
                  type="primary"
                  :data-id="s.row.id"
                  :icon="Edit"
                  @click="
                    dialogSubmitType = 1;
                    openUpdate($event, 1);
                  "
                />
                <el-button
                  type="danger"
                  :data-id="s.row.id"
                  :icon="Delete"
                  @click="pubStore.deleteConfirm($event, toDelete)"
                />
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页器 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="limit"
            :current-page="currentPage"
            :total="total"
            @current-change="pageChange"
          />

          <!-- 添加修改模态框 -->
          <noticeDialog
            ref="noDialog"
            :title="dialogSubmitType == 0 ? '添加角色' : '修改角色'"
            :confirm="dialogSubmitType == 0 ? insertData : updateData"
          >
            <template #main>
              <el-form
                label-position="right"
                label-width="100px"
                :model="addForm"
                style="max-width: 460px"
              >
                <el-form-item label="角色名：">
                  <el-input v-model="addForm.name" />
                </el-form-item>
              </el-form>
            </template>
          </noticeDialog>
        </div>
      </template>
    </page-style-1>
  </div>
</template>

<style scoped>
.content {
  padding-bottom: 20px;
}

::v-deep th div,
::v-deep td div {
  text-align: center;
}

::v-deep .el-pagination {
  margin-top: 8px;
  justify-content: flex-end;
}
</style>